今天接續編輯頁面，目前想到可能需要的欄位如以下:

• 標題: 標題也會帶回列表
• 時間: 旅遊時間的區段選擇
• 區域: 依照地點選擇區域
• 地點: 使用者自行填寫國家
• 內容: 使用者簡述區域，可以寫與旅遊相關的資訊會是期望的旅伴人數…等

以上幾個項目都是input[type=”text”]，除了區域與時間，昨天已經把複雜的區域建立好了，今天目標是時間欄位。

會使用到React的Datepicker(連結)，可以照需求找到自己想要用的樣式(連結)，這次我使用的是Date Range using input with clear button，有起始日期可以供使用者選擇。

這個欄位其實比昨天的簡單很多，第一次使用react-datepicker，說明文件按照做都不用改寫減少很多報錯機會XD(今天唯一錯誤的是忘記把css樣式import到js裡面)。

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

function NewPost(){
    const [dateRange, setDateRange] = useState([null, null]);
    const [startDate, endDate] = dateRange;
    return(
	    <div className="form-group">
	        <label className="form-label" htmlFor="date">時間<span>*</span></label>
	        <DatePicker
	            selectsRange={true}
	            startDate={startDate}
	            endDate={endDate}
	            onChange={(update) => {
	                setDateRange(update);
	            }}
	            isClearable={true}
	        />
	        <small>必填</small>
	    </div>            
    )
}

export default NewPost